<template >
    <div class="zhu">
        <!-- 工作台 -->
        <div class="desk">
            <div class="a1">
                <img src="../images/icon10.png" alt="">
                <p>欢迎来到禧悦辰光酒店工作台</p>
            </div>
            <div class="a2">
                <img src="../images/icon16.png" alt="">
                <p>晴天 6~20°</p>
            </div>
        </div>
        <div class="b">
            <div>今日新订 5</div>
            <div>></div>
        </div>
        <div class="b">
            <div>今日入住 5</div>
            <div>></div>
        </div>
        <div class="b">
            <div>待审核 5</div>
            <div>></div>
        </div>
        <div class="b">
            <div>待回复点评 5</div>
            <div>></div>
        </div>
        <!-- 店长 -->
        <div class="manager">
            <div class="a1">
                <img src="../images/icon15.png" alt="">
                <p>当前角色 | 店长</p>
            </div>
            <div class="a2">
                设置角色
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.zhu {
    height: 46px;
    display: flex;
    margin: 14px;
    justify-content: space-between;
    color: #fff;

    .desk {
        width: 336px;
        height: 46px;
        background-color: #0466C8;
        border-radius: 10px;
        margin-right: 10px;
        display: flex;
        justify-content: space-between;

        .a1 {
            margin-left: 10px;
            line-height: 46px;
            position: relative;

            img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 12px;
                left: 0px;
            }

            p {
                margin-left: 25px;
            }
        }

        .a2 {
            margin-right: 10px;
            line-height: 46px;
            position: relative;

            img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 12px;
                left: 0px;
            }

            p {
                margin-left: 25px;
            }
        }

    }

    .b {
        width: 135px;
        height: 46px;
        background-color: #0466C8;
        border-radius: 10px;
        margin-right: 10px;
        line-height: 46px;
        display: flex;
        justify-content: space-between;
        padding: 0px 10px;
    }

    .manager {
        width: 336px;
        height: 46px;
        background-color: #0466C8;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .a1 {
            margin-left: 10px;
            line-height: 46px;
            position: relative;

            img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 12px;
                left: 0px;
            }

            p {
                margin-left: 25px;
            }
        }

        .a2 {
            width: 80px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background-color: #023E7D;
            border-radius: 10px;
            position: absolute;
            top: 10px;
            right: 10px;

        }
    }

}
</style>